<template>
  <header>
    <h2>button组件</h2>
  </header>
  <main>
    <Buttonzujian ref="buttonRef"> Success1 </Buttonzujian>
    <Buttonzujian plain> Success2 </Buttonzujian>
    <Buttonzujian round> Success3 </Buttonzujian>
    <Buttonzujian circle> Success4 </Buttonzujian>
    <Buttonzujian disabled> Success5 </Buttonzujian><br /><br />
    <Buttonzujian type="primary"> primary </Buttonzujian>
    <Buttonzujian type="success"> success </Buttonzujian>
    <Buttonzujian type="info"> info </Buttonzujian>
    <Buttonzujian type="danger"> danger </Buttonzujian>
    <Buttonzujian type="warning"> waring </Buttonzujian><br /><br />
    <Buttonzujian type="primary" plain> primary </Buttonzujian>
    <Buttonzujian type="success" plain> success </Buttonzujian>
    <Buttonzujian type="info" plain> info </Buttonzujian>
    <Buttonzujian type="danger" plain> danger </Buttonzujian>
    <Buttonzujian type="warning" plain> waring </Buttonzujian><br /><br />
    <Buttonzujian size="large"> large </Buttonzujian>
    <Buttonzujian size="small"> small </Buttonzujian>
  </main>
</template>

<script lang="ts" setup>
import {onMounted, ref} from "vue";
import Buttonzujian from "./components/ButtonUI/Buttonzujian.vue";
import type {ButtonRef} from "./types/buttontype";
const buttonRef = ref<ButtonRef | null>(null);

onMounted(() => {
  if (buttonRef.value) {
    console.log(buttonRef.value.ref);
  }
});
</script>

<style scoped></style>
